﻿

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>白鲸项目管理系统-首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <script src="../../layuiadmin/lib/jquery.min.js"></script>
    <script src="../../layuiadmin/lib/api.js"></script>
    <script src="../../layuiadmin/lib/echarts.min.js"></script>
    <script src="../../layuiadmin/lib/common.js"></script>
    <link href="../../layuiadmin/style/select2.css" rel="stylesheet" />
    <script src="../../layuiadmin/layui/layui.js"></script>
    <script src="../../layuiadmin/lib/system.js"></script>
    <script>
        //检查服务器是否已登录，没有登录则跳转至登录页。
        sys_islogin();
    </script>
    <style>
        .layui-row .layui-col-md2 {
            width: 20%;
        }
    </style>
</head>
<body>

  <div class="layui-fluid">
      <div class="layui-row layui-col-space15">

          <div class="layui-col-sm5 layui-col-md2">
              <div class="layui-card">
                  <div class="layui-card-header">
                      待办任务
                  </div>
                  <div class="layui-card-body layuiadmin-card-list">
                      <p class="layuiadmin-big-font" style="color:blue;" id="taskno">0</p>
                      <p>
                          我的任务
                          <span class="layuiadmin-span-color" id="tasktotal">0</span>
                      </p>
                  </div>
              </div>
          </div>
          <div class="layui-col-sm6 layui-col-md2">
              <div class="layui-card">
                  <div class="layui-card-header">
                      完成率
                  </div>
                  <div class="layui-card-body layuiadmin-card-list">
                      <p class="layuiadmin-big-font" style="color:darkorange;" id="finishper">0%</p>
                      <p>
                          完成数
                          <span class="layuiadmin-span-color" id="taskfinish"></span>
                      </p>
                  </div>
              </div>
          </div>
          <div class="layui-col-sm6 layui-col-md2">
              <div class="layui-card">
                  <div class="layui-card-header">
                      提前率

                  </div>
                  <div class="layui-card-body layuiadmin-card-list">

                      <p class="layuiadmin-big-font" style="color:green;" id="taskupper">0%</p>
                      <p>
                          提前任务数
                          <span class="layuiadmin-span-color" id="taskup">0</span>
                      </p>
                  </div>
              </div>
          </div>
          <div class="layui-col-sm6 layui-col-md2">
              <div class="layui-card">
                  <div class="layui-card-header">
                      逾期率

                  </div>
                  <div class="layui-card-body layuiadmin-card-list">

                      <p class="layuiadmin-big-font" style="color:red;" id="overper">0%</p>
                      <p>
                          逾期任务数
                          <span class="layuiadmin-span-color" id="taskover">20</span>
                      </p>
                  </div>
              </div>
          </div>
          <div class="layui-col-sm6 layui-col-md2">
              <div class="layui-card">
                  <div class="layui-card-header">
                      贡献率
                  </div>
                  <div class="layui-card-body layuiadmin-card-list">

                      <p class="layuiadmin-big-font" style="color:forestgreen;" id="contributionper">0%</p>
                      <p>
                          总任务数
                          <span class="layuiadmin-span-color" id="alltask">0</span>
                      </p>
                  </div>
              </div>
          </div>

          <!--人员统计-->
          <div class="layui-col-sm12">
              <div class="layui-card">
                  <div class="layui-card-header">
                      成员统计
                      <a style="margin-left:20px;" class="layui-btn layui-btn-normal layui-btn-sm" href="/Export/UserStatisExport"><i class="layui-icon layui-icon-export"></i>导出</a>
                  </div>
                  <div class="layui-card-body">
                      <table class="layui-hide" id="userstable" lay-filter="test"></table>
                  </div>
              </div>
          </div>

          <!--曲线图-->
          <div class="layui-col-sm12">
              <div class="layui-card">
                  <div class="layui-card-header">
                      任务统计曲线图

                  </div>
                  <div class="layui-card-body">
                      <div id="taskline" style="height:400px;">

                      </div>
                  </div>
              </div>
          </div>
          <!--项目统计-->
          <div class="layui-col-sm12">
              <div class="layui-card">
                  <div class="layui-card-header">
                      项目统计
                  </div>
                  <div class="layui-card-body">
                      <table class="layui-hide" id="projecttable" lay-filter="test"></table>
                  </div>
              </div>
          </div>

      </div>
    </div>

  <script>
      //任务统计
      var myChart = echarts.init(document.getElementById('taskline'));
      var personsat = new Array();
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
      index: 'lib/index' //主入口模块
  }).use(['index', 'sample', 'carousel','table'], function () {
      var $ = layui.$
          , carousel = layui.carousel;
         
      var table = layui.table;
      
      var option = {
          title: {
              left: 20,
              top: 12,
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              right: 70,
              //top: 20,
              data: [{ name: '我的任务' }, { name: '完成任务' }, { name: '逾期任务' }]
          },
          grid: {
              //top: 60,
              left: '2%',
              right: '2%',
              bottom: 0,
              containLabel: true
          },
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel: {
                  show: true,
                  interval: 0,
                  inside: false,
                  rotate: 20,
                  textStyle: {
                      color: '#000'
                  }

              }
          },
          yAxis: {
              type: 'value'
          },
          series: []
      };
          

      //曲线图统计
      $.ajax({
          url: "/IndexMerber/CurveStatic",    //请求的url地址
          dataType: "json",   //返回格式为json
          async: true,//请求是否异步，默认为异步，这也是ajax重要特性
          data: {},    //参数值
          type: "POST",   //请求方式
          success: function (res) {
              
              option.xAxis.data = res.xAxisData;
              option.series = res.list;
              myChart.setOption(option);
          },

          error: function (res) {
              console.log(res);
              //layer.msg("任务添加失败，请联系技术人员");
          }
      });

      //项目统计
      table.render({
          elem: '#projecttable'
          , url: '/IndexMerber/ProjectStatis'
          , title: '项目统计'
          , totalRow: true
          , cols: [[
              { field: 'projectname', title: '项目名称', align: 'center',width:250 }
              , { field: 'alltotal', title: '任务总数', sort: true, totalRow: true, align: 'center' }
              , { field: 'finishtotal', title: '已完成', sort: true, totalRow: true, align: 'center'}
              , { field: 'beingtotal', title: '进行中', sort: true, totalRow: true, align: 'center'}
              , { field: 'ontimetotal', title: '按时完成', sort: true, totalRow: true, align: 'center'}
              , { field: 'overtotal', title: '逾期完成', sort: true, totalRow: true, align: 'center'}
              , { field: 'days', title: '项目时长(天)', sort: true, totalRow: true, align: 'center'}
              , {
                  field: 'kfallhous', title: '开发时长(小时)', sort: true, totalRow: true, align: 'center',
                  templet: function (d) {
                      return (d.kfallhous) ? Math.floor(d.kfallhous * 100) / 100 : 0;
                  }
              }
              , {
                  field: 'ywallhous', title: '运维时长(小时)', sort: true, totalRow: true, align: 'center',
                  templet: function (d) {
                      return (d.ywallhous) ? Math.floor(d.ywallhous * 100) / 100 : 0;
                  }
              }
          ]]
          , text: {
              none: '暂无相关数据'
          }
      });

      //成员统计
      table.render({
          elem: '#userstable'
          , url: '/IndexMerber/UsersStatis'
          , title: '用户统计'
          , totalRow: true
          , cols: [[
              { field: 'realname', title: '姓名', align: 'center' }
              , { field: 'alltotal', title: '任务总数', sort: true, totalRow: true, align: 'center'}
              , { field: 'taskno', title: '未完成', sort: true, totalRow: true, align: 'center' }
              , { field: 'finishtask', title: '已完成', sort: true, totalRow: true, align: 'center'}
              //, { field: 'beingtotal', title: '进行中', sort: true, totalRow: true,align: 'center' }
              , { field: 'taskup', title: '提前完成', sort: true, totalRow: true, align: 'center'}
              , { field: 'overtask', title: '逾期完成', sort: true, totalRow: true, align: 'center'}
              , {
                  field: 'uppercent', title: '个人能力(%)', align: 'center', sort: true
                  ,templet: function (d) {
                      var str = 0;
                      if (d.uppercent > 0) {
                          //提前完成度
                          str = Math.round(d.uppercent);
                      }
                      
                      return parseInt(str);    
                  }
              }
              , {
                  field: 'totaltimes', title: '饱和度', align: 'center', sort: true,
                  templet: function (d) {
                      var str = "0";
                      
                      if ((d.totaltimes + d.overtimes) > 0) { //分子大于0
                          for (var i = 0; i < personsat.length; i++) {
                              if (d.id == personsat[i].id) {
                                  if (personsat[i].alltimes > 0) { //分母大于0
                                      str = Math.round(((d.totaltimes + d.overtimes) / personsat[i].alltimes) * 100)/100;
                                  }
                              }
                          }
                          
                      }
                      return parseFloat(str);
                  }
              }
          ]]
          , text: {
              none: '暂无相关数据'
          }
      });
  });

      //顶部统计
      $.ajax({
          url: "/IndexMerber/TaskStatistics",    //请求的url地址
          dataType: "json",   //返回格式为json
          async: true,//请求是否异步，默认为异步，这也是ajax重要特性
          data: {},    //参数值
          type: "POST",   //请求方式
          beforeSend: function () {
              //请求前的处理
          },
          success: function (res) {
             
              var all = 0; //自己的任务总数
              var alltask = res.alltask; //整个系统的任务总数
              var oModel = res.list[0];
              $("#alltask").html(alltask);
              for (let key in oModel) {
                  //console.log(key + "--" + oModel[key]);
                  $("#" + key).html(oModel[key]);
                  if (key == 'tasktotal')
                      all = oModel[key];
              }
              if (alltask != 0 && all != 0) {
                  //计算率
                  for (let key in oModel) {

                      if (key == 'taskfinish') $("#finishper").html(Math.round(oModel[key] / all * 100) + "%");
                      if (key == 'taskup') {
                          $("#taskupper").html(Math.round(oModel[key] / all * 100) + "%");
                      }
                      if (key == 'taskover') $("#overper").html(Math.round(oModel[key] / all * 100) + "%");
                      if (key == 'tasktotal') $("#contributionper").html(Math.round(oModel[key] / alltask * 100) + "%");
                  }
              }
              
          },

          error: function (res) {
              console.log(res);
              layer.msg("任务统计失败，请联系技术人员");
          }
      });

      //个人饱和度的分母
      $.ajax({
          url: "/IndexMerber/CalculatePersonSat",    //请求的url地址
          dataType: "json",   //返回格式为json
          async: false,//请求是否异步，默认为异步，这也是ajax重要特性
          data: {},    //参数值
          type: "POST",   //请求方式
          beforeSend: function () {
              //请求前的处理
          },
          success: function (res) {
              personsat = res;
              console.log(res);
          },

          error: function (res) {
              console.log(res);
              
          }
      });

      $(window).resize(function () {
          myChart.resize();
      })
  </script>
</body>
</html>